<template>
   <el-cascader :options="buildinglist.list" value-key="id" collapse-tags   :getCheckedNodes="false"   v-model="cascaderValue" :props="porps" :show-all-levels="porps.checkStrictly" clearable  />
</template>

<script lang='ts' setup>
import { ref,watch,reactive, onMounted } from "vue"
import { buildingdata } from "../service/fee/buildinglist";

//监听楼栋信息
const cascaderValue = ref<any>()
// const props = { label: "name", value: "id", checkStrictly: true }

const emit = defineEmits(["update"])
type  porpType ={ 
  defaultValue?:number[] | null,
  label?: string,
   value?: string, 
   checkStrictly?: boolean
   multiple?:boolean
}
const porps = withDefaults(defineProps<porpType>(),{
    defaultValue:null,
    label: "name",
    value: "id",
    checkStrictly: true,
    multiple:false,
})

const change = (val:any)=>{
  console.log(val);
  
}

watch(cascaderValue, (newValue) => {
    emit("update", newValue)
})

//获取楼栋列表
let buildinglist = reactive({ list: [] });
const getbuildinglist = async () => {
  let res: any = await buildingdata();
  buildinglist.list = res.data.list;
};

onMounted(() => {
  getbuildinglist()
  if (porps.defaultValue) {
    cascaderValue.value=porps.defaultValue
  }
  
});

</script>

<style  scoped>
</style>
